<template>
	<div class="setting-container">
		<!-- 设置对话框 -->
		<el-dialog 
			class="setting-dialog" 
			title="设置" 
			:visible.sync="visible" 
			:before-close="onClose"
			width="480px"
			:append-to-body="true"
			:modal-append-to-body="false"
			:close-on-click-modal="false"
			center>
			<el-form :model="userInfo" label-width="70px" :rules="rules" ref="settingForm">
				<el-form-item label="头像">
					<file-upload  class="avatar-uploader"
					:action="imageAction" 
					:showLoading="true"
					:maxSize="maxSize"  
					@success="onUploadSuccess"
					:fileTypes="['image/jpeg', 'image/png', 'image/jpg','image/webp']">
						<img v-if="userInfo.headImage" :src="userInfo.headImage" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</file-upload>
				</el-form-item>
				<el-form-item label="用户名">
					<el-input disabled v-model="userInfo.userName" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item prop="nickName" label="昵称">
					<el-input v-model="userInfo.nickName" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="性别">
					<el-radio-group v-model="userInfo.sex">
						<el-radio :label="0">男</el-radio>
						<el-radio :label="1">女</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="个性签名">
					<el-input type="textarea" v-model="userInfo.signature"></el-input>
				</el-form-item>
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="onClose()">取 消</el-button>
				<el-button type="primary" @click="onSubmit()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import FileUpload from "../common/FileUpload.vue";
	
	export default {
		name: "setting",
		components: {
			FileUpload
		},
		data() {
			return {
				userInfo: {},
				maxSize: 5*1024*1024,
				action: "/image/upload",
				rules: {
					nickName: [{
						required: true,
						message: '请输入昵称',
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			onClose() {
				this.$emit("close");
			},
			onSubmit() {
				this.$refs['settingForm'].validate((valid) => {
					if (!valid) {
						return false;
					}
					this.$http({
						url: "/user/update",
						method: "put",
						data: this.userInfo
					}).then(()=>{
						this.$store.commit("setUserInfo",this.userInfo);
						this.$emit("close");
						this.$message.success("修改成功");
					})	
				});
			},
			onUploadSuccess(data, file) {
				this.userInfo.headImage = data.originUrl;
				this.userInfo.headImage = data.thumbUrl;
			}
		},
		props: {
			visible: {
				type: Boolean
			}
		},
		computed:{
			imageAction(){
				return `/image/upload`;
			}
		},
		watch: {
			visible: function(newData, oldData) {
				// 深拷贝
				let mine = this.$store.state.userStore.userInfo;
				this.userInfo = JSON.parse(JSON.stringify(mine));
			}
		},
		mounted() {
			// 打开弹窗时禁止滚动
			document.body.style.overflow = 'hidden';
		},
		beforeDestroy() {
			// 关闭弹窗时恢复滚动
			document.body.style.overflow = '';
		}
	}
</script>

<style lang="scss">
	.setting-dialog {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.el-dialog__wrapper {
			display: flex !important;
			align-items: center;
			justify-content: center;
		}
		
		.el-dialog {
			margin: 0 auto !important;
			border-radius: 8px;
			position: relative;
			height: auto;
			
			.el-dialog__header {
				padding: 20px;
				background: #f8f9fa;
				margin: 0;
				border-bottom: 1px solid #eee;
				
				.el-dialog__title {
					font-size: 18px;
					font-weight: 600;
					color: #333;
				}
			}
			
			.el-dialog__body {
				padding: 0;
				overflow: hidden;
			}
		}

		.v-modal {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	}

	.setting-container {
		background-color: #fff;
		height: auto;
		
		.avatar-uploader {
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
			width: 100px;
			height: 100px;
			display: inline-block;
			
			&:hover {
				border-color: #409EFF;
			}
			
			.avatar {
				width: 100%;
				height: 100%;
				display: block;
				object-fit: cover;
			}
			
			.avatar-uploader-icon {
				font-size: 28px;
				color: #8c939d;
				width: 100%;
				height: 100%;
				line-height: 100px;
				text-align: center;
			}
		}
		
		.setting-form {
			.el-form-item {
				margin-bottom: 20px;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				.el-form-item__label {
					font-weight: 500;
					color: #333;
				}
			}
		}
	}

	// 禁止body滚动
	body.el-popup-parent--hidden {
		padding-right: 0 !important;
	}
</style>
